<script setup lang="ts">

import {Folder, Phone, Scissor, VideoCamera} from "@element-plus/icons-vue";
import {useUserStore} from "../stores/user.ts";
import {computed, onMounted, ref} from "vue";
import {openVideoWindow} from "../actions/open_video_window.ts";
import {listenMessageToVideoCall} from "../event/video_call.ts";
import {useUserMessageStore} from "../stores/user_message.ts";
import {storeToRefs} from "pinia";
import {CreateScreenshot} from "../actions/clip_board.ts";
import {sendTextMessage} from "../actions/send_text_message.ts";
import Upload from "./Upload.vue"
defineProps({
  size: {
    type: Number,
    default: 25
  },
  height: {
    type: String,
    default: 'calc(100% - 50px)'
  },
});
let {toUserAccount,userInfo} = storeToRefs(useUserStore());
const {messageMap} = storeToRefs(useUserMessageStore());
let message = ref("");
const computeMessage: string = computed(() => {
  return message.value.replace(/(\r\n|\n|\r)/gm, '');
});
function sendMsg() {
  if (toUserAccount.value == "" || computeMessage.value == "") {
    message.value = "";
    return;
  }
  sendTextMessage(computeMessage.value).then(() => {
    message.value = "";
  });
}
function callVideo() {
  if (toUserAccount.value == "") {
    return;
  }
  // 打开自己的视频窗口
  openVideoWindow(true);
}

onMounted(() => {
  listenMessageToVideoCall();
})
</script>

<template>
  <el-footer class="el-main-one-footer">
    <el-header style="display: flex;align-content: center;justify-content: space-between;padding: 0;height: 50px">
      <div style="display: flex;align-items: center;justify-content: flex-start;">
        <Upload />
        <el-icon style="margin-left: 20px;cursor: pointer" :size="size - 5" @click="toUserAccount.value == ''? '' : CreateScreenshot()">
          <Scissor/>
        </el-icon>
      </div>
      <div  style="display: flex;align-items: center;justify-content: flex-end;padding: 0">
        <el-icon style="margin-right: 20px;cursor: pointer" :size="size - 5" @click="callVideo()">
          <Phone/>
        </el-icon>
        <el-icon  :size="size - 5" style="cursor: pointer" @click="callVideo()">
          <VideoCamera/>
        </el-icon>
      </div>
    </el-header>
    <el-main :height="height">
          <textarea v-model="message" class="el-main-one-footer-input" placeholder="输入消息..."
                    @keyup.enter="sendMsg()"></textarea>
    </el-main>
  </el-footer>
</template>

<style scoped>
.el-main-one-footer {
  bottom: 0;
  height: 160px;
  border-left: 1px solid #dedede;
  border-top: 1px solid #dedede;
}
.el-textarea__inner {
  background: none !important;
  border: none !important;
}

.el-main-one-footer-input {
  width: 100%;
  height: 100%;
  font-size: 14px;
  border: none;
  background: none;
  resize: none;
  padding: 0;
  overflow-x: hidden;
}

.el-main-one-footer-input:focus {
  color: black; /* 文本颜色 */
  caret-color: blue;
  outline: none; /* 去掉边框 */
}
</style>